<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" :checked="isAllCheck" @change="changeFn"/>
    <button @click="aaa">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input type="checkbox" v-model="item.c"/>
        <span>{{item.name}}</span>
      </li><template>
  <div>
    <span>全选:</span>
    <input type="checkbox" :checked="isAllChecked" @change="changeFn"/>
    <button @click="opposite">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input type="checkbox" v-model="item.c"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  //计算属性
  computed:{
    isAllChecked(){
      //判断数组中item.c是不是都是true
      //和全选复选框绑定
      return this.arr.every(item=>item.c)
    }
  },
  methods:{
    changeFn(e){
      //获取全选复选框的状态
      // console.log(e.target.checked);
      this.arr.forEach(item=>item.c=e.target.checked)
    },
    opposite(){
      this.arr.forEach(item=>item.c=!item.c)
    }

  }
};
</script>

<style>
</style>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed:{
    isAllCheck(){
      return this.arr.every(item=>item.c)
    }
  },
  methods:{
    changeFn(e){
      // e.target 获取当前复选框的状态
      // console.log(e.target.checked);
      this.arr.forEach(item=>item.c=e.target.checked)
    },
    aaa(){
     this.arr.forEach(item => {
       item.c=!item.c
     });
    }
  }
};
</script>

<style>
</style>